<template>
  <div class="header">
    <div class="title">{{title}}</div>
    <div class="admin">
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          <i class="el-icon-setting"></i>
          {{username}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="dialogVisible=true">修改密码</el-dropdown-item>
            <el-dropdown-item @click="onClickQuit">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <!-- ==================================================== -->
    <!-- ==================================================== -->
    <el-dialog title="提示" v-model="dialogVisible" width="30%">
      <div class="form-input">
        <el-form :model='setPass' @keyup.enter='onClickSetPass'>
          <el-form-item>
            <el-input v-model="setPass.password" placeholder="请输入原密码" show-password prefix-icon='el-icon-unlock'></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="setPass.setpassword" placeholder="请输入修改密码" show-password prefix-icon='el-icon-key'> </el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="onClickSetPass">修改</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script lang='ts'>
import { reactive, toRefs } from "vue";
import $routet from "@/router/index";
import { $message } from "../element";
import { Post } from "@/api";
export default {
  name: " ",
  setup() {
    const data = reactive({
      title: (window as any).title,
      username: JSON.parse(localStorage.getItem("userdata") as string).data
        .name,
      dialogVisible: false,
    });

    const setPassData = reactive({
      setPass: {
        name: data.username,
        password: "",
        setpassword: "",
      },
    });

    /* 修改密码 */
    const onClickSetPass = async () => {
      if (!setPassData.setPass.password || !setPassData.setPass.setpassword) {
        $message("error", "密码不能为空");
        return;
      }

      if (setPassData.setPass.password == setPassData.setPass.setpassword) {
        $message("error", "不能和原来密码相同");
        return;
      }

      try {
        const setPassResult = await Post({
          url: "setUserPass",
          data: setPassData.setPass,
        });

        if (setPassResult.data.code == 200) {
          $message("success", setPassResult.data.message);
          $routet.push({ path: "/login" });
        }
      } catch (error) {
        console.log(error);
        if (error.data) {
          $message("error", error.data.message.toString());
        }
      }
    };

    /* 退出登录 */
    const onClickQuit = async () => {
      localStorage.removeItem("token");
      localStorage.removeItem("userdata");
      $routet.push({ path: "/login" });
      $message("success", "退出成功");
    };

    return {
      ...toRefs(data),
      ...toRefs(setPassData),
      onClickSetPass,
      onClickQuit,
    };
  },
};
</script>
<style lang="less" scoped>
.header {
  background: #26344b;
  height: 100%;
  color: white;
  position: relative;
  display: flex;
  align-items: center;

  .admin {
    position: absolute;
    right: 5%;
    .el-dropdown-link {
      cursor: pointer;
      color: white;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
  }

  .title {
    display: flex;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    align-items: center;
    width: 200px;
    height: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .form-input {
    width: 60%;
    margin: 0 auto;
  }
}
</style>